<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Lazy Load Tree Nodes - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css"
          href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Lazy Load Tree Nodes</h2>
<p>Get full hierarchical tree data but lazy load nodes level by level.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="padding:5px">
    <ul class="easyui-tree"
        data-options="url:'tree_data1.json',method:'get',loadFilter:myLoadFilter"></ul>
</div>
<script>
    function myLoadFilter(data, parent) {
        var state = $.data(this, 'tree');

        function setData() {
            var serno = 1;
            var todo = [];
            for (var i = 0; i < data.length; i++) {
                todo.push(data[i]);
            }
            while (todo.length) {
                var node = todo.shift();
                if (node.id == undefined) {
                    node.id = '_node_' + (serno++);
                }
                if (node.children) {
                    node.state = 'closed';
                    node.children1 = node.children;
                    node.children = undefined;
                    todo = todo.concat(node.children1);
                }
            }
            state.tdata = data;
        }

        function find(id) {
            var data = state.tdata;
            var cc = [data];
            while (cc.length) {
                var c = cc.shift();
                for (var i = 0; i < c.length; i++) {
                    var node = c[i];
                    if (node.id == id) {
                        return node;
                    } else if (node.children1) {
                        cc.push(node.children1);
                    }
                }
            }
            return null;
        }

        setData();

        var t = $(this);
        var opts = t.tree('options');
        opts.onBeforeExpand = function (node) {
            var n = find(node.id);
            if (n.children && n.children.length) {
                return
            }
            if (n.children1) {
                var filter = opts.loadFilter;
                opts.loadFilter = function (data) {
                    return data;
                };
                t.tree('append', {
                    parent: node.target,
                    data: n.children1
                });
                opts.loadFilter = filter;
                n.children = n.children1;
            }
        };
        return data;
    }
</script>
</body>
</html>